<template>
  <el-card class="numberViewComp-card">
    <template #header>
      <div class="card-header">
        <span>{{ title }}</span>
      </div>
    </template>
    <div
      class="card-body"
      :style="{ width: width, height: height }"
      @click="clickBody"
    >
      <div class="card-body-header">{{ total }}</div>
      <div class="card-body-content">{{ title }}</div>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    total: {
      type: Number,
      default: 0,
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '300px',
    },
  })
  const emit = defineEmits(['select'])
  const clickBody = function () {
    emit('select', { name: props.title })
  }
</script>
<style lang="scss" setup>
  .numberViewComp-card {
    .card-body {
      font-size: 33px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 11px;
      overflow: hidden;
      cursor: pointer;
      .card-body-header {
        word-break: break-all;
      }
      .card-body-content {
        font-size: 18px;
        margin-top: 33px;
      }
      // padding-top: 100px;
    }
  }
</style>
